<template>
  <div>
    <p class="margin-b">
      <van-tag round type="success" color="#2BC7BD">{{data.exam_type_name}}</van-tag>
      {{data.exam_name}}
    </p>
    <p
      class="y-answer"
      @click="selectAnswer(item)"
      v-for="(item,index) in data.option_list"
      :key="index"
    >
      <span
        class="y-circle"
        :class="{
          'select':!showImportant&& getEqual(item.option_no,data.my_answer,true),
          'success':isShowSuccess&& getEqual(item.option_no,data.correct_answer),
          'error':isShowError && getEqual(item.option_no,data.my_answer)
        }"
      >{{item.option_no}}</span>
      <span>{{item.option_name}}</span>
    </p>

    <div class="text-c padding-tb" v-show="moreBtnShow && !showImportant">
      <van-button
        round
        color="linear-gradient(to right, #2EC1FE, #2EA1FE)"
        size="large"
        @click="checkAnswer"
      >确认答案</van-button>
    </div>

    <div v-show="(data.my_answer && data.showAnswer) || showImportant">
      <div class="answer">
        <div>
          <span class="weight">正确答案：</span>
          <span class="color-lan">{{data.correct_answer}}</span>
        </div>
        <div>
          您的答案：
          <span class="color-hong">{{data.my_answer}}</span>
        </div>
      </div>
      <!-- 解析 -->
      <div class="jiexi">
        <div class="tika-title">
          <span></span>
          <b>解析</b>
        </div>
        <div class="jiexi-con">解析内容（无）</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["data", "showImportant"],
  computed: {
    isShowSuccess() {
      return (
        (this.data.showAnswer && this.data.my_answer) || this.showImportant
      );
    },
    isShowError() {
      return (
        (this.data.showAnswer && this.data.is_right == 2) || this.showImportant
      );
    },
    moreBtnShow() {
      return this.data.type == 2 || this.data.type == 4;
    },
    ...mapState({
      bank_id: state => state.question.bank_id,
      subject_id: state => state.question.subject_id,
      exam_id: state => state.question.exam_id,
      papers_id: state => state.question.papers_id,
      type: state => state.question.type,
      model: state => state.question.model,
      chapter_id: state => state.question.chapter_id,
      joint_id: state => state.question.joint_id,

      subject_List: state => state.question.zjList,
      zjList: state => state.question.zjList
    })
  },
  data() {
    return {
      checkList: [],
      paramObj: {}
    };
  },
  watch: {
    data(val) {}
  },
  created() {},
  methods: {
    checkAnswer() {
      // console.log(this.checkList);
      this.ajaxSend(this.paramObj);
    },
    getEqual(str1, str2, bool) {
      //单选题
      if (this.data.type == 1) {
        return str1 == str2;
      } else if (this.data.type == 2 || this.data.type == 4) {
        if (bool) {
          return (
            this.checkList.indexOf(str1) != -1 ||
            this.data.my_answer.indexOf(str1) != -1
          );
        }
        //多选题、不定项
        return str2.indexOf(str1) != -1;
      } else if (this.data.type == 3) {
        return str1 == str2;
        //判断题
      }
    },
    selectAnswer(item) {
      if (this.showImportant) {
        return;
      }
      //已做题
      if (this.data.my_answer && this.data.type == 1) {
        return;
      }

      let param = {
        bank_id: this.bank_id,
        subject_id: this.subject_id,
        exam_id: this.data.exam_id,
        // answer_time: this.answer_time,
        papers_id: this.data.papers_id,
        type: this.type
      };
      //章节
      if (this.type == 1) {
        param.chapter_id = this.chapter_id;
        param.joint_id = this.joint_id;
      }

      this.checkList = this.toggle(item.option_no, this.checkList);

      //单选题
      if (this.data.type == 1) {
        param.myanswer = item.option_no;
        param.my_answer = param.myanswer;
        this.ajaxSend(param);
      } else if (this.data.type == 2 || this.data.type == 4) {
        //多选题、不定项

        param.myanswer = this.checkList.join("");
        param.my_answer = param.myanswer;
        console.log(param.my_answer);
        // this.ajaxSend(param);
      } else if (this.data.type == 3) {
        //判断题
      }
      this.paramObj = param;
    },
    ajaxSend(param) {
      this.$axios.post("/bank/doBankMakeExam", param).then(res => {
        if (res.code == 200 || res.code == 208) {
          let obj = Object.assign({}, this.data);
          obj.my_answer = param.my_answer;
          obj.is_right = param.my_answer == obj.correct_answer ? "1" : "2";
          this.$emit("setAnswer", obj);
        } else {
          this.$Toast(res.msg);
        }
      });
    },
    toggle(str, list) {
      let index = list.findIndex(item => item == str);
      if (index == -1) {
        return [...list, str].sort();
      } else {
        list.splice(index, 1);
        return list;
      }
    }
  }
};
</script> 

<style lang="less" scoped>
@import "../question.less";
.margin-b {
  margin-bottom: 25px;
}
.answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: #f2f7f8;
  & > div {
    padding: 0 30px;
    text-align: center;
  }
}
.color-lan {
  color: #27a8fe;
}
.color-hong {
  color: #f76368;
}
.weight {
  font-weight: bold;
}
.tika-title {
  border-top: 3px solid #f8f8f8;
  margin-top: 30px;
  padding: 10px 0;
}
</style>
